<template>
    <n-modal v-model:show="showModal">
        <n-card
                style="width: 600px"
                :title="props.editInfo.name"
                :bordered="false"
                size="huge"
                role="dialog"
                aria-modal="true"
        >
            <n-form
                    ref="formRef"
                    :model="props.editInfo"
                    :rules="rules"
                    label-placement="left"
                    label-width="auto"
                    require-mark-placement="right-hanging"
                    size="medium"
                    :style="{
                    maxWidth: '640px'
                }"
            >
                <n-form-item label="登录账号" path="account">
                    <n-input v-model:value="props.editInfo.account" type="text" placeholder="登录所需的账号"/>
                </n-form-item>
                <n-form-item label="教师姓名" path="name">
                    <n-input v-model:value="props.editInfo.name" type="text" placeholder="名字"/>
                </n-form-item>
                <n-form-item label="手机号" path="phone">
                    <n-input v-model:value="props.editInfo.phone" type="text" placeholder="手机"/>
                </n-form-item>
                <n-form-item label="所属院系" path="college_id">
                    <n-select children-field="noChildren" v-model:value="props.editInfo.college_id"
                              :options="useAdmin.academy"/>
                </n-form-item>
                <n-form-item label="登录密码(长度为6-12)" path="password">
                    <n-input v-model:value="props.editInfo.password" type="text" placeholder="密码"/>
                </n-form-item>
                <n-form-item label="请再次输入密码" path="passwordCopy">
                    <n-input v-model:value="passwordCopy" type="text" placeholder="重复密码"/>
                </n-form-item>
                <n-form-item label="备注" path="note">
                    <n-input v-model:value="props.editInfo.note" type="text" placeholder="备注"/>
                </n-form-item>
                <!--两个按钮-->
                <div style="display: flex; justify-content: flex-end">
                    <n-button @click="setShowModal">
                        不改了
                    </n-button>
                    <n-button type="primary" @click="handleValidateButtonClick">
                        修改信息
                    </n-button>
                </div>
            </n-form>
        </n-card>
    </n-modal>
</template>

<script setup>

import { NButton } from "naive-ui";
import { useAdminStore } from "@/stores/admin";
import workApi from "@/http/workApi";

const props = defineProps([ 'editInfo'])

const useAdmin = useAdminStore()
const showModal = ref(false)
const setShowModal = ()=>{
  showModal.value = !showModal.value
}

// 验证规则
// 密码验证
const passwordCopy = ref('')
const validatedPassword = () => {
    if (props.editInfo.password === passwordCopy.value) {
        return true
    }
    return new Error('密码不一致');
}
const rules = {
    account: {
        required: true,
        trigger: ["blur"],
        validator(rule, value) {
            if (value === null || value==='') {
                return new Error('还没填写账号');
            }else if (value.length > 11) {
                return new Error('必须在1-10之间');
            }
            return true;
        },

    },
    name: {
        required: true,
        trigger: ['blur'],
        message: '还没说这个老师叫什么呢'
    },
    phone: {
        required: true,
        type: "number",
        trigger: ['blur'],
        validator(rule, value) {
            const reg = /^1[3,4,5,7,8][0-9]{9}$/;
            if (!reg.test(value)) {
                return new Error('手机号输入错误');
            }
            return true
        },
    },
    college_id: {
        required: true,
        type: 'number',
        trigger: ['blur'],
        message: '未填写学院'
    },
    password: {
        required: true,
        trigger: ["blur"],
        message: '还没填写密码'
    },
    passwordCopy: {
        required: true,
        trigger: 'blur',
        validator: validatedPassword
    }
}

// 执行验证
const formRef = ref(null);
const handleValidateButtonClick = (e) => {
    e.preventDefault()
    formRef.value?.validate((errors) => {
        if (!errors) {
            editTeacher()
        } else {
            window.$message.error('好像没有填好, 检查一下吧')
        }
    })
}
const editTeacher = ()=>{
    workApi.put('admin/teacher', props.editInfo).then(()=>{
        setShowModal()
        passwordCopy.value = ''
        useAdmin.setTeacher()
    }).catch(()=>{
        setShowModal()
        passwordCopy.value = ''
        useAdmin.setTeacher()
    })
}


defineExpose({
  setShowModal
})
</script>

<style scoped lang="less">
.n-button {
  margin: 15px;
}
</style>